<template>
    <t-layout>
    <t-header>
        <div class="detail-header">
        <t-space size="2">
        
        产品配置
       
        </t-space>
        </div>
    </t-header>
    <t-content>

        <div class="data-content">
            <div class="data-header">
                <t-card title="基本信息" :bordered="false" :shadow="true" :style="{ width: '100%' }">
                <template #actions>
                    <t-link theme="primary" hover="color" @click="clickHandler">
                        <template #suffix-icon>
                            <EditIcon />
                        </template>
                         
                    </t-link>
                </template>
                <t-descriptions  size="small" :column="4">
                    <t-descriptions-item label="产品名称">{{ data.name }}</t-descriptions-item>
                    <t-descriptions-item label="接入协议"> {{ data.access }}</t-descriptions-item
                    >
                    <t-descriptions-item label="数据协议"
                    >{{ data.data }}</t-descriptions-item
                    >
                    <t-descriptions-item label="传输协议"
                    >{{ data.method }}</t-descriptions-item
                    >
                    <t-descriptions-item label="产品描述"
                    >{{ data.desc }}</t-descriptions-item
                    >
                </t-descriptions>
                </t-card>
            </div>
           <Modbus :type="route.params.type" :product="route.params.id"></Modbus>
        </div>
    </t-content>
  
    
</t-layout>
</template>
<style scoped>
.t-layout__content{
    background-color: var(--td-bg-color-container);
}
.data-header{
    margin-bottom: 4px;
    background-color: var(--td-bg-color-container);
    display: flex;
    justify-content: space-between;
}


.detail-header{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}


</style>
<script setup name="detail">
import {useRoute} from 'vue-router';
import { EditIcon } from 'tdesign-icons-vue-next';
import {getProductItem} from '@/api/api.js';
import { onMounted,ref } from 'vue';
import Modbus from './Modbus.vue';
const route = useRoute();
const data = ref({});
const clickHandler = () => {
  
};


const getItemData = () => {
    console.log(route.params.id)
    getProductItem({id:route.params.id}).then(res=>{
        if(res.code===200){
            data.value = res.data
        }
        
    })
}


onMounted(()=>{
    getItemData()
})


</script>